import { Component } from "react";
import { createPortal } from "react-dom";
import Modal from "./components/Modal";
import "./global.css";

export default class App extends Component {
  state = {
    show: false,
  };

  render() {
    return (
      <div>
        <button onClick={() => this.setState({ show: true })}>Open</button>
        <div
          style={{
            filter: "grayscale(0.9)",
            width: "200px",
            height: "200px",
            backgroundColor: "red",
          }}
        >
          {this.state.show &&
            createPortal(
              <Modal
                title="新增用户"
                onClose={() => this.setState({ show: false })}
              >
                <h2>内容</h2>
              </Modal>,
              document.body
            )}
        </div>
      </div>
    );
  }
}
